<template>
  <div id="electric-chart"></div>
</template>
<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  onDeactivated,
  onUnmounted,
  markRaw,
  watch,
} from "vue";
import * as echarts from "echarts";
let myChart = ref(null);
let props = defineProps(["lineColor"]);

let initChart = () => {
  const option = {
    title: {
      text: `{a|单位：kWh}`,
      textStyle: {
        rich: {
          a: {
            fontSize: 15,
            fontWeight: 400,
            color: "#fff",
          },
        },
      },
      top: "-1%",
      left: "2%",
    },
    legend: {
      data: ["尖电量", "峰电量", "平电量", "谷电量"],
      textStyle: {
        align: "right",
        color: "#fff",
        fontSize: 16,
      },
      itemGap: 30,
      itemWidth: 22,
      itemHeight: 12,

      top: "-1%",
      right: "5%",
    },
    backgroundColor: "#061021",
    tooltip: {
      trigger: "axis",
      axisPointer: {},
    },
    grid: {
      x: "0",
      bottom: "0%",
      top: "18%",
      left: "3%",
      right: "3%",
      containLabel: true,
    },
    xAxis: {
      // triggerEvent: true,
      boundaryGap: true, //x 与左边的距离
      data: ["0", "1", "2", "3", "112", "35", "53"],
      axisLabel: {
        show: true,
        fontSize: 15,
        color: "#fff",
        margin: 10,
      },

      axisTick: {
        show: true,
        lineStyle: {
          color: "#1d61a1", // 坐标轴线线的颜色
          width: "1", // 坐标轴线线宽
          type: "solid", // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
          fontSize: "59",
        },
      },

      axisLine: {
        show: false,
      },
      splitArea: {
        // show: true,
        color: "red",
        lineStyle: {
          lineStyle: {
            color: "#434343", // 坐标轴线线的颜色
            width: "15", // 坐标轴线线宽
            type: "solid", // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
            fontSize: "59",
          },
        },
      },
    },
    yAxis: [
      {
        // name: "单位（℃）",
        type: "value",
        nameTextStyle: {
          padding: [0, 0, 2, 10],
          color: "#fff",
          fontSize: "15",
          fontWeigth: "bolder",
          lineHeight: "0",
        },
        splitNumber: 4,
        axisLabel: {
          show: true,
          fontSize: 15,
          fontWeigth: "400",
          color: "#fff",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            type: "dased",
            color: "#002b69", //中间线的颜色
            // opacity: ".3",
          },
        },
      },
    ],
    series: [
      {
        name: "尖电量",
        type: "bar",
        silent: true,
        smooth: true,
        barMaxWidth: 30,
        itemStyle: {
          normal: {
            color: "#4BE7FF",
            barBorderRadius: [12, 12, 0, 0],
            lineStyle: {
              //线的颜色
              color: "#44F0FF",
              width: 2,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                //湿度折线图这个颜色  (2,80,249)
                colorStops: [
                  {
                    offset: 0,
                    color: "#1a4d60",
                  },
                  {
                    offset: 1,
                    color: "#061021",
                  },
                ],
              },
            },
          },
        },

        data: [200, 108, 200, 40, 210, 130, 210, 130],
      },
      {
        name: "峰电量",
        type: "bar",
        silent: true,
        smooth: true,
        barMaxWidth: 30,
        itemStyle: {
          normal: {
            color: "#176FF9",
            barBorderRadius: [12, 12, 0, 0],
            lineStyle: {
              //线的颜色
              color: "#44F0FF",
              width: 2,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                //湿度折线图这个颜色  (2,80,249)
                colorStops: [
                  {
                    offset: 0,
                    color: "#1a4d60",
                  },
                  {
                    offset: 1,
                    color: "#061021",
                  },
                ],
              },
            },
          },
        },

        data: [20, 18, 20, 40, 10, 10, 10, 130],
      },
      {
        name: "平电量",
        type: "bar",
        silent: true,
        smooth: true,
        barMaxWidth: 30,
        itemStyle: {
          normal: {
            color: "#F8E000",
            barBorderRadius: [12, 12, 0, 0],
            lineStyle: {
              //线的颜色
              color: "#F8E000",
              width: 2,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                //湿度折线图这个颜色  (2,80,249)
                colorStops: [
                  {
                    offset: 0,
                    color: "#1a4d60",
                  },
                  {
                    offset: 1,
                    color: "#061021",
                  },
                ],
              },
            },
          },
        },

        data: [206, 218, 320, 140, 130, 170, 120, 30],
      },
      {
        name: "谷电量",
        type: "bar",
        silent: true,
        smooth: true,
        barMaxWidth: 30,
        itemStyle: {
          normal: {
            color: "#DD3F36",
            barBorderRadius: [12, 12, 0, 0],
            lineStyle: {
              //线的颜色
              color: "#DD3F36",
              width: 2,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                //湿度折线图这个颜色  (2,80,249)
                colorStops: [
                  {
                    offset: 0,
                    color: "#1a4d60",
                  },
                  {
                    offset: 1,
                    color: "#061021",
                  },
                ],
              },
            },
          },
        },

        data: [20, 21, 32, 70, 13, 170, 52, 30],
      },
    ],
  };
  myChart?.value?.setOption(option);
};
onMounted(() => {
  myChart.value = markRaw(
    echarts.init(document.getElementById("electric-chart"))
  );
  initChart();
  window.addEventListener("resize", resize);
});
watch();
const resize = () => {
  myChart.value.resize();
};
onUnmounted(() => {
  removeEventListener("resize", resize);
});
</script>
<style lang="scss" scoped>
#electric-chart {
  width: 100%;
  height: 30vh;
  margin-top: 3vh;
}
</style>
